<template>
  <view class="container">
    <view class="topImg">
      <image
        src="/static/my/myToken.png"
        mode="aspectFill"></image>
    </view>
    <view class="title"> 我的{{$tokenName}} </view>
    <view class="token">
      {{ tokenNum }}
    </view>
    <view class="btn">
      <button
        type="primary"
        @click="toWithDraw">
        提现
      </button>
    </view>
  </view>
</template>

<script>
  import { getCashInfo } from '@/apis/first.js'
  export default {
    data() {
      return {
        info: {},
        tokenNum: 0
      }
    },
    onLoad() {
      this.info = this.$store.getters.userInfo
      this.getCashInfo()
    },
    methods: {
      async getCashInfo() {
        const res = await getCashInfo({
          id: this.info.id
        })
        let data = res.data
        if (res.code == 200) {
          this.tokenNum = data.tokenNum
          this.latestPrice = data.latestPrice
        }
      },
      toWithDraw() {
        uni.navigateTo({
          url: '/pages/withdraw/withdraw'
        })
      }
    }
  }
</script>

<style lang="scss">
  .container {
    display: flex;
    width: 750rpx;
    align-items: center;
    flex-direction: column;
    position: relative;
    height: 100vh;
    .topImg {
      width: 120rpx;
      height: 120rpx;
      margin: 100rpx 0;
      image {
        width: 100%;
        height: 100%;
      }
    }
    .title {
      font-size: 32rpx;
      color: #1a1a1a;
      margin-bottom: 40rpx;
    }
    .token {
      font-size: 80rpx;
      color: #1a1a1a;
      font-weight: bold;
    }
    .btn {
      position: absolute;
      width: 332rpx;
      height: 88rpx;
      bottom: 300rpx;
      /deep/ button {
        width: 332rpx !important;
        height: 88rpx !important;
        background-color: #2f64ff !important;
        color: #fff;
        border-radius: 16rpx;
      }
    }
  }
</style>
